<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<button>点击</button>
<div>
    这是div
</div>

<body>
    <script>
        /* 
        参数都是
        参数1 ： 动画时间mm
        参数1： 是动画完成后调用的函数
    
        */
        var cont = 0;
        $('button').click(function () {
            cont++;
            if (cont % 2 == 0) {
                // 设置隐藏
                $('div').hide(1000, function () {
                    console.log('动画执行完了')
                })
                // 设置淡出（透明度的隐藏）
                $('div').fadeOut(1000)

                // 划出
                $('div').slideUp(1000)

            } else {
                // 设置显示
                $('div').show(1000, function () {
                    console.log('显示执行完了');
                })
                // 设置淡入
                $('div').fadeIn(1000)
                // 划入
                $('div').slideDown(1000)

            }

            // 设置标签的显示或隐藏，当前是显示，就设置隐藏，反之一样
            // $('div').toggle()

            // $('div').fadeToggle(1000)
            $('div').slideToggle(1000)
        })


    </script>
</body>

</html>